<template>
	<u-popup :show="show" mode='center' round='16' bgColor="transparent" @close="$emit('change',false)">
		<view class="flex flex-js-end mb-16" v-if="close">
			<w-icon name="close" size="24" @click="$emit('change',false)"></w-icon>
		</view>
		<view class="w-modal">
			<view class="toast-title" v-if='title'>
				{{title}}
			</view>
			<slot></slot>
			<view class="toast-action" v-if="showButton">
				<w-button v-if="showCancelButton" :type="btnType" :pain="true" size="lg" shape="circle"
					@click='event(false)'>{{handleLang(cancelText)}}
				</w-button>
				<w-button  :style="{flex:!showCancelButton && '1'}":type="btnType" size="lg" shape="circle"
					@click='event(true)'>{{handleLang(submitText)}}</w-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "w-modal",
		props: {
			close: {
				type: Boolean,
				default: false
			},
			showButton: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: "提示"
			},
			cancelText: {
				type: String,
				default: "取消"
			},
			submitText: {
				type: String,
				default: "确认"
			},
			btnType: {
				type: String,
				default: 'colorful'
			},
			showCancelButton: {
				type: Boolean,
				default: true
			}
		},
		model: {
			prop: 'show',
			event: "change"
		},
		data() {
			return {

			};
		},
		methods: {
			event(res) {
				this.$emit('action', res)
				this.$emit('change', false)
			}
		},

	}
</script>

<style lang="scss">
	.w-modal {
		width: 654rpx;
		@extend .bg-color-white,
		.br-16;
		padding-top: 72rpx;
		padding-left: 52rpx;
		padding-right: 52rpx;
		padding-bottom: 56rpx;

		>.toast-title {
			color: #222;
			@extend .text-center, .font-size-16, .font-w-500;
		}

		>.toast-action {
			margin-top: 112rpx;
			@extend .flex, .flex-js-sb;

			>.z-btn {
				height: 80rpx;
				width: 252rpx;
				border-radius: 40rpx;
			}
		}
	}
</style>